<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="command/Bootstrap/bootstrap-3.3.0/css/bootstrap.css"/>
		<link rel="stylesheet" href="command/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css"/>
		<link rel="stylesheet" href="command/bower_components/bootstrap-table/dist/bootstrap-table.min.css"/>
		<script src="command/jquery-3.4.0.min.js"></script>
		<script src="command/Bootstrap/bootstrap-3.3.0/js/bootstrap.min.js"></script>
		<script src="command/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
		<script src="command/bower_components/moment/min/moment.min.js"></script>
		<script src="command/bower_components/moment/min/locales.min.js"></script>
		<script src="command/bower_components/bootbox/bootbox.min.js"></script>
		<script src="command/bower_components/bootstrap-select/js/bootstrap-select.js"></script>
		<script src="command/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
		<script src="command/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
		<script sre="command/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
		<script src="command/bower_components/moment/min/moment-with-locales.min.js"></script>
		<link href="command/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet" />
		<link href="command/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
		<script type="application/javascript">
			function add() {
				window.location.href = "jfjkadd.html";
			}

			function change() {
				window.location.href = "jfjkchange.html";
			}

			function del() {
				var qd = confirm("是否确定删除");
				if (qd) {
					alert("删除成功");
					window.location.href = "jfjk.html";
				}
			}
			$(function(){
				//读取数据类型
				$.ajax({
					type:"get",	//提交类型
					dataTyp:"json",//数据类型
					url:"json/jfjk.json",//数据访问路径
					success:function(reslt){//返回成功后所调用得函数
						createTable(reslt);//函数调用
					},
					error:function(date){//返回失败所调用得函数
						alert(date);
					}
				});
			});
			/*将数据绑定在表格上*/
			function createTable(userData){
				$("#tblUser").bootstrapTable("destroy");//清空表格
				$("#tblUser").bootstrapTable({
					data:userData,
					loadMsg:"正在加载数据",
					sidePagination:"client",
					pageSize:"2", //分页
					pagination:true,
					singleSelect:true,
					columns:[
					{
						field:"state",
						checkbox:true,
						align:"center"
					},
					{
						field:"chaxunren",
						title:"查询人",
						align:"center"
					},
					{
						field:"chaxunshijian",
						title:"查询时间",
						align:"center"
					},
					{
						field:"jieguo",
						title:"查询后的结果",
						align:"center"
					},
					{
						field:"qiyongyuan",
						title:"是否启用预案",
						align:"center"
					},
					{
						field:"fujian",
						title:"附件",
						align:"center"
					},
					{
						field:"chuangjianren",
						title:"创建人",
						align:"center"
					},
					{
						field:"chuangjiandate",
						title:"创建日期",
						align:"center"
					},
					{
						field:"finalxiugairen",
						title:"最后修改人",
						align:"center"
					},
					{
						field:"finalxiugaidate",
						title:"最后修改时间",
						align:"center"
					}
					]
				});
			}
		</script>
	</head>
	<body>
		<div class="panel-heading">
			机房监控
		</div>
		<div class="panel-body">
			<div class="input-group">
				<input type="text" id="search" placeholder="搜索内容" />
				<button class="btn-xs btn-info">查询</button>
			</div>
			<hr />
			<div class="btn-group">
				<button class="btn btn-default" onclick="add()">增加</button>
				<button class="btn btn-danger" onclick="del()">删除</button>
				<button class="btn btn-warning" onclick="change()">修改</button>
				<a href='http://127.0.0.1:8848/computer-room-module/jfjk.html' download='file.html'>
					<button class="btn btn-success active">下载</button>
				</a>
			</div>
			<hr />
			<!--列表开始-->
			<div class="row col-md-10">	
				<table id="tblUser"></table>	
			</div>
			<!--列表结束-->
	</body>
</html>
